<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="550px"
    @close="handleClose">
    <el-form ref="modelForm" :model="modelForm" :rules="rules" label-width="80px">
      <el-form-item label="登录名称" prop="accountName">
        <el-input v-model="modelForm.accountName" placeholder="登录名称"/>
      </el-form-item>
      <el-form-item label="所属部门" prop="organizationId" required>
        <treeselect
          v-model="modelForm.organizationId"
          :searchable="true"
          :open-on-click="true"
          :clear-on-select="true"
          :close-on-select="true"
          :options="deptList"
          :normalizer="normalizer"
          placeholder="所属部门"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="modelForm.phone" placeholder="手机号码"/>
      </el-form-item>
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item label="真实姓名" prop="truename">
            <el-input v-model="modelForm.truename" placeholder="真实姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="性别" class="small" prop="sex">
            <el-radio-group v-model="modelForm.sex">
              <el-radio-button label="1">男</el-radio-button>
              <el-radio-button label="0">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="modelForm.age" placeholder="年龄"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="用户状态" required>
        <el-radio-group v-model="modelForm.status">
          <el-radio
            v-for="item in dictOptions"
            :key="item.dictCode"
            :label="item.dictValue"
          >{{ item.dictLabel }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button :loading="isSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import resultCode from '@/utils/resultCode'
import { add, update } from '@/api/account'
import { getOrgList } from '@/api/org'
import { validatePhone } from '@/utils/validate'
import createUniqueString from '@/utils/createUniqueString'

export default {
  components: { Treeselect },
  data() {
    return {
      visible: false,
      isSubmit: false,
      title: '添加用户',
      dictOptions: [],
      dataList: [],
      deptList: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      modelForm: {
        accountId: null,
        accountName: null,
        password: '123456',
        truename: null,
        phone: null,
        organizationId: null,
        sex: null,
        age: null,
        status: null
      },
      rules: {
        organizationId: [
          { required: true, message: '请选择所属部门', trigger: 'blur' }
        ],
        accountName: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        age: [
          { type: 'number', message: '年龄必须为数字值' }
        ]
      }
    }
  },
  methods: {
    init(dicts, model) {
      this.dictOptions = dicts
      if (model) { // 修改逻辑，回填数据
        this.modelForm.accountId = model.accountId || null
        this.modelForm.accountName = model.accountName || null
        this.modelForm.truename = model.truename || null
        this.modelForm.status = model.status || null
        this.modelForm.phone = model.phone || null
        this.modelForm.password = null
        this.modelForm.sex = model.sex || null
        this.modelForm.age = model.age || null
        this.modelForm.organizationId = model.organizationId || null
        this.title = '修改用户'
      } else { // 添加逻辑
        this.title = '添加用户'
        this.modelForm.accountId = null
        this.modelForm.accountName = null
        this.modelForm.truename = null
        this.modelForm.phone = null
        this.modelForm.password = '123456'
        this.modelForm.organizationId = null
        this.modelForm.sex = null
        this.modelForm.age = null
        this.modelForm.status = null
        this.dictOptions.forEach(dict => {
          if (dict.isDefault === 'Y') {
            this.modelForm.status = dict.dictValue
          }
        })
      }
      this.getDeptList()
      this.visible = true
    },
    getDeptList: function() {
      getOrgList('', '').then(response => {
        const result = response.data // 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          this.deptList = result.data
        }
      })
    },
    handleSubmit: function() {
      this.$refs.modelForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.isSubmit = true
        if (this.modelForm.accountId == null) { // 新增
          this.modelForm.accountId = createUniqueString()
          this.modelForm.password = '123456'
          add(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('添加成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        } else {
          update(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('修改成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        }
      })
    },
    resetForm: function() {
      this.$refs.modelForm.resetFields()
      this.visible = false
    },
    handleClose: function() {
      this.$refs.modelForm.resetFields()
      this.visible = false
      this.isSubmit = false
    }
  }
}
</script>
